<!-- 服务器页面 -->
<template>
  <div class="app-container sever-container">
    <div class="listBox"> 
      <el-button type="text" icon="el-icon-s-promotion" @click="toListIndex">返回首页</el-button>
    </div>
    <div>
      <el-button type="text" icon="el-icon-back" @click="back">返回</el-button>
    </div>
    <el-divider content-position="left">服务器设备清单</el-divider>
    <!-- 这个 :data="tableData" 代表的是 你这个 table 组件 要渲染的数据 是 tableData -->
    <!-- v-loading="loading" 是加载状态 他绑定的是 loading -->
    <div class="table">
      <el-table :data="tableData"  v-loading="loading" border stripe>
      <!-- 序号列是固定这么写的 type="index" 他就会有序号列 -->
        <el-table-column label="序号" type="index" width="50"> </el-table-column>
        <!-- 下面的  每一个 el-table-column 就代表 一列 -->
        <!-- prop 它是你想显示数据的字段名称  label 是列名 -->
        <el-table-column prop="name" label="名称" width="130"></el-table-column>
        <el-table-column prop="detailed" label="详细" width="140"></el-table-column>
        <el-table-column prop="position" label="安装位置" width="80"></el-table-column>
        <el-table-column prop="num" label="数量" width="50"></el-table-column>
        <el-table-column prop="procureTime" label="采购时间" width="100"></el-table-column>
        <el-table-column prop="totalAmount" label="总金额" width="80"></el-table-column>
        <el-table-column prop="purchasingUnit" label="采购单位" width="150"></el-table-column>
        <el-table-column prop="function" label="功能说明">
          <!-- <el-button type="text" @click="functionVisible = true">点击查看功能</el-button>
          <el-dialog
            title="功能说明"
            :visible.sync="functionVisible"
            width="40%"
          >
            <span>这是一段信息</span>
          </el-dialog> -->
      </el-table-column>
      <el-table-column prop="notes" label="备注" width="80"></el-table-column>
      </el-table>
    </div>
  
  </div>
</template>
<script>
  export default {
    name: 'Serve',
    data() {
      return {
        // 定义在这里，然后这个 tableData 改变的化试图也会自动更新
        // 初始的时候要为空数组，然后里面是一个个对象，一个对象代表一行
        tableData: [],
        // 定义加载状态
        loading: false,
        //功能弹窗控制
        functionVisible: false,
      }
    },
    mounted() {
      // 合适的时机调用这个获取数据的方法
      this.getList()
    },
    methods: {
      // 返回
      back() {
        this.$router.go(-1)
      },
      // 返回首页
      toListIndex() {
         this.$router.push({
          path: '/ListIndex'
        })
      },
      // 定义一个获取数据的方法，到时候你的接口要在这个方法里调用
      getList() {
        // 打开加载框
        this.loading = true
        // 写个定时器 模拟接口的延时
        setTimeout(() => {
          const res = {
            code: 200,
            data: [
              {name: '华为服务器',detailed: 'RH5885H V3', position: '二柜机', num: 3, procureTime: '2016-6-15', totalAmount: 270000, purchasingUnit: '河北环天电子科技有限公司', function: '华为服务器承担诚信系统私有化服务器云平台软件及诚信业务软件的运算、存储等基础设备。', notes: ''},
              {name: '浪潮服务器',detailed: 'NF5280M4', position: '一柜机', num: 2, procureTime: '2017-12-16', totalAmount: 69720, purchasingUnit: '河北通尚信息技术有限公司', function: '浪潮服务器承担诚信系统业务软件、诚信系统数据库的运算、存储等基础设备；2台服务器做双机热备，保障业务系统24小时不间断稳定运行。', notes: ''},
              {name: '存储服务器',detailed: '浪潮 AS520E-M1', position: '二柜机', num: 1, procureTime: '2016-6-14', totalAmount: 96500, purchasingUnit: '河北康盛电子科技有限公司', function: '存储服务器提供诚信系统所产生的数据的存储。存储服务器是由很多块独立的磁盘，组合成一个容量巨大的磁盘组，利用个别磁盘提供数据所产生加成效果提升整个磁盘系统效能。利用这项技术，将数据切割成许多区段，分别存放在各个硬盘上，保证存储服务器出现单一硬盘故障时，业务不中断。', notes: ''},
              {name: '备份服务器',detailed: '爱数EBackup', position: '二柜机', num: 1, procureTime: '2017-12-17', totalAmount: 85900, purchasingUnit: '石家庄东琳电子科技有限公司', function: '备份服务器是指针对于服务器所产生的数据信息进行相应的存储备份过程，从而保障数据的安全运行。数据管理和保护可攫取信息的最大价值，规避因为病毒、业务数据错乱而导致的风险。', notes: ''},
            ],
            msg: '数据获取成功'
          }
          // console.log(JSON.stringify(res.data));
          this.tableData = res.data
          this.loading = false
        }, 1000)
      }
    }
  }
</script>
<style lang="less" scoped>
  .sever-container {
    position: relative;
    .el-divider__text {
      font-size: 18px;
    }
    .listBox {
      position: absolute;
        top: 6%;
        right:3%;
       
      }
   
  
  }
</style>